---
title: "Checkbox"
description: An interactive input that allows users to toggle a selection on or off, often used for settings or multiple-choice selections.
order: 8
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Checkbox.html#props"]
---

## Basic

A checkbox is a small box you can tick to select an option. It’s either on or off.
<How toUse="forms/checkbox/checkbox-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/checkbox
```

## Composed components
<Composed components={['field']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='checkbox'/>

## Anatomy
```
import { Checkbox } from "@/components/ui/checkbox"
import { Description, Label } from "@/components/ui/field"
```

```
<Checkbox>
  <Label>Remember me</Label>
  <Description>Keep me logged in on this device</Description>
</Checkbox>
```

## Invalid
The checkbox is in an error state.
<How toUse="forms/checkbox/checkbox-invalid-demo" />

## Indeterminate
The checkbox is in an indeterminate state.
<How toUse="forms/checkbox/checkbox-indeterminate-demo" />

## Controlled
You can control the checkbox value by using the `value` prop.
<How minW60 toUse="forms/checkbox/checkbox-controlled-demo" />

## Uncontrolled
You can control the checkbox value by using the `defaultValue` prop.
<How toUse="forms/checkbox/checkbox-uncontrolled-demo" />

## Disabled
The checkbox is disabled.
<How toUse="forms/checkbox/checkbox-disabled-demo" />
